import React, { useMemo } from 'react';
import { palette, useDarkMode } from '@mongodb-js/compass-components';

const Collaborate: React.FunctionComponent = () => {
  const darkMode = useDarkMode();
  const strokeColor = useMemo(
    () => (darkMode ? palette.white : palette.black),
    [darkMode]
  );

  return (
    <svg
      width="72"
      height="72"
      viewBox="0 0 72 72"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g id="General_CONTENT_Collaborate">
        <g id="general_content_collaborate">
          <path
            id="Vector"
            d="M36 45.4857C40.8285 45.4857 44.7429 41.5714 44.7429 36.7429C44.7429 31.9143 40.8285 28 36 28C31.1715 28 27.2571 31.9143 27.2571 36.7429C27.2571 41.5714 31.1715 45.4857 36 45.4857ZM36 45.4857C26.1 45.4857 18 53.8171 18 64H54C54 53.6849 45.9 45.4857 36 45.4857Z"
            stroke={strokeColor}
            strokeMiterlimit="10"
          />
          <path
            id="Vector_2"
            d="M4 64H3.5C3.5 64.2761 3.72386 64.5 4 64.5V64ZM21.5 46C21.5 49.0376 19.0376 51.5 16 51.5V52.5C19.5899 52.5 22.5 49.5899 22.5 46H21.5ZM16 51.5C12.9624 51.5 10.5 49.0376 10.5 46H9.5C9.5 49.5899 12.4101 52.5 16 52.5V51.5ZM10.5 46C10.5 42.9624 12.9624 40.5 16 40.5V39.5C12.4101 39.5 9.5 42.4101 9.5 46H10.5ZM16 40.5C19.0376 40.5 21.5 42.9624 21.5 46H22.5C22.5 42.4101 19.5899 39.5 16 39.5V40.5ZM18 63.5H4V64.5H18V63.5ZM4.5 64C4.5 57.6095 9.60948 52.5 16 52.5V51.5C9.05719 51.5 3.5 57.0572 3.5 64H4.5ZM16 52.5C17.9067 52.5 19.6974 52.9545 21.2722 53.7606L21.7278 52.8705C20.0141 51.9932 18.0675 51.5 16 51.5V52.5Z"
            fill={strokeColor}
          />
          <path
            id="Vector_3"
            d="M68 64H68.5C68.5 64.2761 68.2761 64.5 68 64.5V64ZM50.5 46C50.5 49.0376 52.9624 51.5 56 51.5V52.5C52.4101 52.5 49.5 49.5899 49.5 46H50.5ZM56 51.5C59.0376 51.5 61.5 49.0376 61.5 46H62.5C62.5 49.5899 59.5899 52.5 56 52.5V51.5ZM61.5 46C61.5 42.9624 59.0376 40.5 56 40.5V39.5C59.5899 39.5 62.5 42.4101 62.5 46H61.5ZM56 40.5C52.9624 40.5 50.5 42.9624 50.5 46H49.5C49.5 42.4101 52.4101 39.5 56 39.5V40.5ZM54 63.5H68V64.5H54V63.5ZM67.5 64C67.5 57.6095 62.3905 52.5 56 52.5V51.5C62.9428 51.5 68.5 57.0572 68.5 64H67.5ZM56 52.5C54.0933 52.5 52.3026 52.9545 50.7278 53.7606L50.2722 52.8705C51.9859 51.9932 53.9325 51.5 56 51.5V52.5Z"
            fill={strokeColor}
          />
          <path
            id="Vector_4"
            d="M66 8H6C4.89543 8 4 8.89543 4 10V18C4 19.1046 4.89543 20 6 20L31 20L34.4636 24.1563C35.2631 25.1158 36.7369 25.1158 37.5364 24.1563L41 20L44.5 20H66C67.1046 20 68 19.1046 68 18V10C68 8.89543 67.1046 8 66 8Z"
            fill={palette.green.base}
            stroke={strokeColor}
          />
        </g>
      </g>
    </svg>
  );
};

export default Collaborate;
